<template>

  <div class="app-container flex-column">
    <div class="flex-between mt10 mb10">
      <div>
        <span class="ml5">操作时间：</span>
        <el-date-picker v-model="dateRange" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
          range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" @change="handleQuery"></el-date-picker>
      </div>
      <div>

      </div>
    </div>

    <div style="flex: 1;overflow: auto;">
      <el-table ref="tables" :data="tableList" height="100%" @selection-change="handleSelectionChange"
        :default-sort="defaultSort" @sort-change="handleSortChange" :row-class-name="tableRowClassName" border stripe
        highlight-current-row>
        <el-table-column label="序号" width="60" header-align="center" align="center" show-overflow-tooltip>
          <template scope="scope">
            <span>{{ (currentpage - 1) * pagesize + scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作人员" header-align="center" prop="oper_name" width="110" show-overflow-tooltip
          sortable="custom" :sort-orders="['descending', 'ascending']" />
        <el-table-column label="操作地址" header-align="center" prop="oper_ip" width="100" show-overflow-tooltip />
        <el-table-column label="操作地点" header-align="center" prop="oper_location" width="110" show-overflow-tooltip />
        <el-table-column label="操作URL" header-align="center" prop="oper_url" show-overflow-tooltip />
        <el-table-column label="操作状态" header-align="center" align="center" prop="status" width="100" show-overflow-tooltip>
          <template slot-scope="scope">
            <dict-tag :options="dict.type.sys_common_status" :value="scope.row.status" />
          </template>
        </el-table-column>

        <el-table-column label="操作结果" header-align="center" prop="result_msg" width="110" show-overflow-tooltip />
        <el-table-column label="操作日期" header-align="center" prop="oper_time" width="160" sortable="custom"
          show-overflow-tooltip :sort-orders="['descending', 'ascending']">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.oper_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="消耗时间" header-align="center" prop="cost_time" width="110" show-overflow-tooltip
          sortable="custom" :sort-orders="['descending', 'ascending']">
          <template slot-scope="scope">
            <span>{{ scope.row.cost_time }}毫秒</span>
          </template>
        </el-table-column>
      </el-table>

    </div>
    <div class="mb20">
      <pagination v-show="total > 0" :total="total" :page.sync="currentpage" :limit.sync="pagesize"
        @pagination="getList" />
    </div>

  </div>


</template>

<script>
  import {
    list,
    delOperlog,
    cleanOperlog
  } from "@/api/monitor/operlog";

  export default {
    name: "Operlog",
    dicts: ['sys_oper_type', 'sys_common_status'],
    data() {
      return {

        total: 0,
        currentpage: 1,
        pagesize: 50,
        // 岗位表格数据
        tableList: [],
        tableheight: 400,
        // 查询参数
        queryParams: {},
        getindex: -1,
        // 日期范围
        dateRange: [],
        // 默认排序
        defaultSort: {
          prop: 'oper_time',
          order: 'descending'
        },
        orderByColumn: 'oper_time',
        isAsc: 'descending',
      }
    },

    created() {
      this.getList();
    },
    methods: {
      /** 查询登录日志列表 */
      getList() {
        this.getindex = -1;
        var Params = {
          page: this.currentpage,
          pagesize: this.pagesize,
          orderByColumn: this.orderByColumn,
          dateRange: this.dateRange ? this.dateRange.join(",") : '',
          isAsc: this.isAsc == 'descending' ? "desc" : ''
        }

        list(Params).then(response => {
          this.tableList = response.rows;
          this.total = parseInt(response.total);
        });

      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.currentpage = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {

      },
      /** 多选框选中数据 */
      handleSelectionChange(selection) {

      },
      /** 排序触发事件 */
      handleSortChange(column, prop, order) {
        this.orderByColumn = column.prop;
        this.isAsc = column.order;
        this.getList();
      },

      tableRowClassName({
        row,
        rowIndex
      }) {
        row.index = rowIndex;
      },
      getrow(row) {
        this.getindex = row.index;
      },

      /** 导出按钮操作 */
      handleExport() {
        this.download('monitor/operlog/export', {
          ...this.queryParams
        }, `logininfor_${new Date().getTime()}.xlsx`)
      }
    }
  };
</script>
